<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
<template>
  <div class="app-container">
    <avue-crud ref="crud"
               :data="tableData"
               :permission="permissionList"
               :table-loading="tableLoading"
               :option="tableOption"
               :before-open="beforeOpen"
               v-model="form"
               @on-load="getList"
               @refresh-change="refreshChange"
               @row-update="handleUpdate"
               @row-save="handleSave"
               @row-del="handleDelete">
      <template slot="enable" slot-scope="scope">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="scope.row.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeEnable(scope.row)">
        </el-switch>
      </template>
      <template slot="picUrl" slot-scope="scope">
        <img
          style="height: 100px"
          :src="scope.row.picUrl">
      </template>
    </avue-crud>
  </div>
</template>

<script>
    import {checkPermi, checkRole} from "@/utils/permission"
    import { listPortal, getPortal, delPortal, addPortal, updatePortal, exportPortal } from '@/api/wxma/wxportal'
    import {tableOption} from '@/const/crud/wxma/wxportal'

    export default {
        components: {},
        name: 'wxportal',
        data() {
            return {
                form: {},
                tableData: [],
                tableLoading: false,
                tableOption: tableOption
            }
        },
        created() {
            // this.getList();
        },
        mounted: function () {
        },
        computed: {
            permissionList() {
                return {
                    addBtn: checkPermi(['mall:goodscategory:add']),
                    delBtn: checkPermi(['mall:goodscategory:del']),
                    editBtn: checkPermi(['mall:goodscategory:edit']),
                    viewBtn: checkPermi(['mall:goodscategory:get']),
                };
            }
        },
        methods: {
            changeEnable(row) {
                updatePortal({
                    code: row.code,
                    enable: row.enable
                }).then(data => {
                    this.getList(this.page)
                })
            },
            beforeOpen(done, type) {
                done()
            },
            /** 查询小程序首页轮播图列表 */
            getList() {
                this.loading = true;
                listPortal(this.queryParams).then(response => {
                    this.tableData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    code: null,
                    enable: null,
                    description: null,
                    picUrl: null,
                    sort: null,
                    createTime: null,
                    updateTime: null,
                    delFlag: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.codes = selection.map(item => item.code)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加小程序首页轮播图";
            },
            /** 修改按钮操作 */
            handleUpdate: function (row, index, done, loading) {
                updatePortal(row).then(data => {
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    })
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading()
                })
            },
            /** 提交按钮 */
            handleSave: function (row, done, loading) {
                addPortal(row).then(data => {
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    })
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading()
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const codes = row.code || this.codes;
                this.$confirm('是否确认删除小程序首页轮播图编号为"' + codes + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return delPortal(codes);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有小程序首页轮播图数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return exportPortal(queryParams);
                }).then(response => {
                    this.download(response.msg);
                })
            },
            /**
             * 刷新回调
             */
            refreshChange() {
                this.getList()
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
